<template>
	<view class="nearby-city-page" :style="[AppSkinVar]">
		<view class="nearby-city-page__header e-flex e-flex-between bg-white">
			<text>{{ $t('nearby.当前位置') }}：{{ addressText }}</text>
			<text class="iconfont icon-ERP_gengxin c-primary e-font-32"
				:class="{ 'nearby-city-page--loading': loading }" @tap="getMyLocation"></text>
		</view>
		<view class="e-p-l-30 e-p-r-30 e-p-t-24 e-p-b-24 c-91">
			{{ $t('nearby.选择其他城市') }}
		</view>
		<view v-for="item in cityList" :key="item.letter" :id="`nearbyCity-${item.letter}`">
			<view class="e-p-l-30 e-p-r-30 e-p-t-4 e-p-b-4">
				{{ item.letter }}
			</view>
			<view class="e-p-l-28 e-p-r-28 e-p-t-26 e-p-b-26 bg-white" v-for="items in item.data"
				:key="items.id" @tap="setLocation(items)">
				{{ items.fullname }}
			</view>
		</view>
		<view class="nearby-city-page__letter">
			<view v-for="item in letter" :key="item" @tap="handleClick(item)">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getDistrict, geolocation } from '@/common/utils/map/index'
	import type {DistrictItem,SortDistrict} from '@/common/utils/map/tencentApi'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useCurrentInstance,
		useUserLocation
	} from '@/common/hooks'

	const ctx = useCurrentInstance()
	const {
		getLocation } = useUserLocation()


	const addressText = ref('')
	const loading = ref(false)
	const letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

	const cityList = ref<SortDistrict[]>([])


	const getUserLocation = () => {
		getLocation().then(res => {
			addressText.value = res.address_component.city
		})
	}
	const getMyLocation = () => {
		loading.value = true
		getLocation(true).then(res => {
			addressText.value = res.address_component.city
		}).finally(() => {
			loading.value = false
		})
	}
	const setLocation = (data : DistrictItem) => {
		let { lat, lng } = data.location
		geolocation(lat, lng).then(() => {
			ctx.$back()
		})
	}
	const handleClick = (letter : string) => {
		uni.createSelectorQuery()
			.select(`#nearbyCity-${letter}`)
			.boundingClientRect(data => {
				//目标位置的节点：类class或者id
				uni.createSelectorQuery()
					.select('.nearby-city-page')
					.boundingClientRect(res => {
						//最外层盒子的节点：类class或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: data.top - res.top
						})
					})
					.exec()
			})
			.exec()
	}


	onLoad(() => {
		getUserLocation()
		getDistrict().then(res => {
			cityList.value = res
		})
	})
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.c-91 {
		color: #919298;
	}

	.nearby-city-page {
		&__header {
			padding: 26rpx 30rpx;
		}

		&--loading {
			animation: loading 1s linear infinite;
		}

		@keyframes loading {
			100% {
				transform: rotate(360deg);
			}
		}

		&__letter {
			position: fixed;
			right: 30rpx;
			top: 198rpx;
			font-size: 26rpx;
			color: #4d4d4d;
			text-align: center;

			>view {
				margin-bottom: 8rpx;
			}
		}
	}
</style>